﻿<template>
  <el-form ref="deviceFormRef" :model="data" :rules="rules" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设备名称：" prop="deviceName">
          <el-input v-model="formData.deviceName" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="工位序号：" prop="stationNum">
          <el-input-number
            v-model="formData.stationNum"
            :min="1"
            :max="stationMaxCount"
            style="width: 100%"
            @blur="handleStationNumCheck"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设备类型：" prop="deviceType">
          <el-select v-model="formData.deviceType">
            <el-option
              v-for="item in deviceTypes"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备型号：" prop="deviceMode">
          <el-select v-model="formData.deviceMode">
            <el-option
              v-for="item in deviceModes"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="是否启用：">
          <el-switch v-model="data.isEnabled" active-text="启用" inactive-text="禁用" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="通讯方式：">
          <el-radio-group v-model="data.protocol">
            <el-radio :value="EnumProtocol.TCP">TCP</el-radio>
            <el-radio :value="EnumProtocol.SerialPort">串口</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20" :v-if="formData.deviceType == 'generator'">
      <el-col :span="12">
        <el-form-item label="设定温度：">
          <el-input v-model="formData.temperature" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">
      {{ data.protocol == EnumProtocol.TCP ? "TCP配置" : "串口配置" }}
    </el-divider>
    <!-- TCP配置 -->
    <div v-if="data.protocol == EnumProtocol.TCP">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="IP地址：" prop="tcpIp">
            <el-input v-model="formData.tcpIp" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="端口号：" prop="tcpPort">
            <el-input v-model="formData.tcpPort" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- TCP配置 end -->

    <!-- 串口配置 -->
    <div v-else>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="串口号：" prop="comPort">
            <el-select v-model="formData.comPort">
              <el-option v-for="item in selectComPorts" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="波特率：" prop="comBaudRate">
            <el-input v-model="formData.comBaudRate" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="数据位：" prop="comDataBits">
            <el-input v-model="formData.comDataBits" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停止位：" prop="comStopBits">
            <el-select v-model="formData.comStopBits">
              <el-option
                v-for="(value, key) in EnumStopBits"
                :key="value"
                :label="key"
                :value="value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="校验位：" prop="comParity">
            <el-select v-model="formData.comParity">
              <el-option
                v-for="(value, key) in EnumParity"
                :key="value"
                :label="key"
                :value="value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <!-- 串口配置 end -->

    <el-row justify="center">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleClose(false)">取消</el-button>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { EnumParity, EnumProtocol, EnumStopBits } from "@/enums";
import { useDevicesStore } from "@/store/business/devices.store";
import deviceApi from "@/api/business/device.api";
import systemApi from "@/api/system.api";

const deviceStore = useDevicesStore();

const deviceFormRef = ref();

const deviceTypes = deviceStore.deviceTypeAndModes;
const deviceModes = ref<KeyValueItem[]>();
const selectComPorts = ref<string[]>();
const stationMaxCount = ref<number>(1);

const props = defineProps(["formData"]);
const data = reactive<DeviceConfig>(props.formData);

const emit = defineEmits<{
  (e: "close", refreshTable: boolean): void;
}>();

onMounted(() => {
  deviceApi.getComPorts().then((res) => {
    selectComPorts.value = res;
    console.log("selectComPorts", selectComPorts.value);
  });

  systemApi.getMaxStationCount().then((res) => {
    stationMaxCount.value = res;
  });

  deviceStore.loadDeviceTypeAndModes();
});

watch(
  () => data.deviceType,
  (newVal) => {
    deviceModes.value = deviceTypes.find((a) => a.key == newVal).children ?? [];
    data.deviceMode = deviceModes.value[0].key ?? "";
  }
);

function handleStationNumCheck() {}
function handleSave() {
  console.log("handleSave", data);
  deviceStore.saveDeviceAndRefresh(data).then(() => {
    ElMessage.success("保存成功");
    // 关闭弹窗，刷新
    handleClose(true);
  });
}

function handleClose(refreshTable: boolean) {
  emit("close", refreshTable);
}

const rules = reactive({
  deviceName: [{ required: true, message: "设备名不能为空", trigger: "blur" }],
  deviceType: [{ required: true, message: "设备类型不能为空", trigger: "blur" }],
  deviceMode: [{ required: true, message: "设备型号不能为空", trigger: "blur" }],
  stationNum: [{ required: true, message: "设备工位号不能为空", trigger: "blur" }],
  tcpIp: [
    { required: data.protocol == EnumProtocol.TCP, message: "TCP地址不能为空", trigger: "blur" },
  ],
  tcpPort: [
    {
      required: data.protocol == EnumProtocol.TCP,
      message: "TCP端口不能为空",
      trigger: "blur",
    },
  ],
  comPort: [
    {
      required: data.protocol == EnumProtocol.SerialPort,
      message: "串口不能为空",
      trigger: "blur",
    },
  ],
  comBaudRate: [
    {
      required: data.protocol == EnumProtocol.SerialPort,
      type: "integer",
      message: "波特率不能为空",
      trigger: "blur",
    },
  ],
  comDataBits: [
    {
      required: data.protocol == EnumProtocol.SerialPort,
      type: "integer",
      message: "数据位不能为空",
      trigger: "blur",
    },
  ],
  comStopBits: [
    {
      required: data.protocol == EnumProtocol.SerialPort,
      message: "停止位不能为空",
      trigger: "blur",
    },
  ],
  comParity: [
    {
      required: data.protocol == EnumProtocol.SerialPort,
      message: "校验位不能为空",
      trigger: "blur",
    },
  ],
});
</script>

<style scoped lang="scss"></style>
